.modal-content {
  height: 324px;
  width: 100%;

  .data-color-classification {
    display: flex;
    height: calc(100% - 48px);
    justify-content: space-between;
    width: 100%;

    .model-title {
      border-bottom: 1px solid #e9e9e9;
      box-sizing: border-box;
      color: #5d637e;
      font-size: 14px;
      font-weight: 500;
      height: 29px;
      letter-spacing: 1px;
      line-height: 29px;
      padding: 0 20px;
    }

    .left-data-content {
      border: 1px solid #e9e9e9;
      border-radius: 2px;
      height: 100%;
      width: 150px;

      .data-items {
        height: calc(100% - 29px);
        padding: 12px;
      }
    }

    .color-classification {
      border: 1px solid #e9e9e9;
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      width: calc(100% - 158px);

      // 离散
      .classification {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;

        .color-scheme {
          align-items: center;
          display: flex;
          flex-direction: column;
          height: 80px;
          margin-bottom: 6px;
          width: 64px;

          // 配色方案九宫格
          .scratchable-latex {
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            height: 54px;
            justify-content: space-between;
            padding: 4px;
            width: 51px;

            &:hover {
              border: 1px solid #6771ff;
              border-radius: 2px;
            }

            span {
              display: inline-block;
              height: 12px;
              width: 12px;
            }
          }

          .select-scheme {
            border: 1px solid #6771ff;
            border-radius: 2px;
          }
        }
      }

      // 连续
      .successive-color-content {
        cursor: pointer;
        padding: 12px 24px;
        width: 100%;

        // 过渡色
        .color-transition-scheme {
          align-items: center;
          border: 1px solid transparent;
          border-radius: 2px;
          box-sizing: border-box;
          display: flex;
          height: 28px;
          margin-bottom: 12px;
          padding: 0 12px;
          width: 100%;

          &:hover {
            border: 1px solid #6771ff;
          }

          .color-transition {
            box-shadow: #f1f1f1 0 0 0 1px inset;
            height: 16px;
            margin-right: 12px;
            width: calc(100% - 50px);
          }


          .color-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 50px;
          }
        }

        .select-color {
          border: 1px solid #6771ff;
        }
      }

      // footer
      .color-classification-footer {
        align-items: center;
        border-top: 1px solid #e9e9e9;
        display: flex;
        height: 42px;
        padding: 0 12px;

        .footer-color-item {
          align-items: center;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          height: 23px;
          justify-content: center;
          margin-right: 8px;
          width: 23px;

          > span {
            border-radius: 50%;
            display: inline-block;
            height: 19px;
            width: 19px;
          }

          &:hover {
            border: 1px solid #5e647f;
          }
        }
      }
    }
  }

  .opacity-boundary {
    color: #5d637e;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    height: 24px;
    justify-content: space-between;
    letter-spacing: 1px;
    line-height: 20px;
    margin-top: 24px;

    .opacity {
      align-items: center;
      display: flex;
      height: 100%;
    }

    .boundary {
      align-items: center;
      display: flex;
      width: auto;

      .boundary-select {
        align-items: center;
        background: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        height: 24px;
        justify-content: space-between;
        padding: 0 12px;
        width: 120px;
      }

      .boundary-select-disable {
        background-color: #f5f5f5;
        cursor: not-allowed;
      }
    }
    
  }
}
